<template>
  <div class="hotel-services-dashboard">
    <div class="services-grid">
      <div class="top-services-row">
        <div class="service-card data-check-card">
          <CheckData :categories="filteredCategories"></CheckData>
        </div>
        <div class="service-card">
          <AllServicesHome
            header-title="Location & Neighbourhood"
            :goalValue="9.0"
            :icon-path="biglocation"
            :categories="getCategoryByKey('location_neighbourhood')"
            @clickTitle="
              handleServiceClick('location', 'Location & Neighbourhood')
            "
          />
        </div>
        <div class="service-card">
          <AllServicesHome
            header-title="Room Comfort"
            :goalValue="9.2"
            :icon-path="bigbed"
            :categories="getCategoryByKey('room_comfort')"
            @clickTitle="handleServiceClick('roomFacilities', 'Room Comfort')"
          />
        </div>
        <div class="service-card">
          <AllServicesHome
            header-title="Cleanliness"
            :goalValue="10.0"
            :icon-path="bigclean"
            :categories="getCategoryByKey('cleanliness')"
            @clickTitle="handleServiceClick('cleanness', 'Cleanliness')"
          />
        </div>
        <div class="service-card">
          <AllServicesHome
            :goalValue="8.8"
            header-title="Hotel Amenities & Atmosphere"
            :icon-path="bigsun"
            :categories="getCategoryByKey('hotel_amenities_atmosphere')"
            @clickTitle="
              handleServiceClick(
                'hotelAmenities',
                'Hotel Amenities & Atmosphere'
              )
            "
          />
        </div>
      </div>
      <div class="bottom-services-row">
        <div class="service-card metrics-card">
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/biglocation1.png"
                  alt="Cleanliness Icon"
                />
              </div>
              <div class="metric-label">Location & Neighbourhood</div>
            </div>
            <div class="metric-value">{{ metricValues.location }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigbed1.png"
                  alt="Room Icon"
                />
              </div>
              <div class="metric-label">Room Comfort</div>
            </div>
            <div class="metric-value">{{ metricValues.roomComfort }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigclean1.png"
                  alt="Location Icon"
                />
              </div>
              <div class="metric-label">Cleanliness</div>
            </div>
            <div class="metric-value">{{ metricValues.cleanliness }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigsun1.png"
                  alt="Service Icon"
                />
              </div>
              <div class="metric-label">Hotel Amenities & Atmosphere</div>
            </div>
            <div class="metric-value">{{ metricValues.amenities }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigfood1.png"
                  alt="Amenities Icon"
                />
              </div>
              <div class="metric-label">Food & Beverage</div>
            </div>
            <div class="metric-value">{{ metricValues.food }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigservices1.png"
                  alt="Food Icon"
                />
              </div>
              <div class="metric-label">Guest Experience & Service</div>
            </div>
            <div class="metric-value">{{ metricValues.service }}%</div>
          </div>
          <div class="metric-item">
            <div class="metric-content">
              <div class="metric-icon">
                <img
                  src="@/assets/pieIcon/circle8/bigmoney1.png"
                  alt="Value Icon"
                />
              </div>
              <div class="metric-label">Value for money</div>
            </div>
            <div class="metric-value">{{ metricValues.value }}%</div>
          </div>
        </div>
        <div class="service-card">
          <AllServicesHome
            header-title="Food & Beverage"
            :goalValue="8.5"
            :icon-path="bigfood"
            :categories="getCategoryByKey('food_beverage')"
            @clickTitle="handleServiceClick('foodBeverage', 'Food & Beverage')"
          />
        </div>
        <div class="service-card">
          <AllServicesHome
            :goalValue="9.5"
            header-title="Guest Experience & Service"
            :categories="getCategoryByKey('guest_experience_service')"
            :icon-path="bigservices"
            @clickTitle="
              handleServiceClick('guestService', 'Guest Experience & Service')
            "
          />
        </div>
        <div class="service-card">
          <AllServicesHome
            header-title="Value for Money"
            :goalValue="8.5"
            :icon-path="bigmoney"
            :categories="getCategoryByKey('value_for_money')"
            @clickTitle="handleServiceClick('valueForMoney', 'Value for Money')"
          />
        </div>
        <div class="service-card kpi-card">
          <div class="kpi-header">
            <!-- <div class="kpi-title">Customize KPI</div>
            <div class="kpi-percentage">25%</div>
            <div class="kpi-visibility">
              <img src="@/assets/eye.png" alt="Visibility Icon" />
            </div> -->
            <div class="icon">
              <div
                style="
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  border: 1px solid rgb(204, 204, 204);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div>?</div>
              </div>
            </div>
            <div
              class="title"
              style="
                flex: 1;
                min-width: 0;
                margin-left: 8px;
                overflow: hidden;
                font-size: 0.0694rem;
                font-weight: 600;
                color: #6a6969;
              "
            >
              Customize KPI
            </div>
            <div style="cursor: pointer; width: 18px; height: 18px">
              <img
                src="@/assets/eye.png"
                alt=""
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div class="kpi-content">
            <img src="@/assets/Add.png" alt="Add Icon" class="add-icon" />
          </div>
        </div>
      </div>
    </div>

    <div v-if="isPopupVisible" class="modal-overlay">
      <div class="modal-backdrop" @click="closePopup"></div>
      <div class="modal-container">
        <DetailPop
          :current-icon="currentIcon"
          :popupContent="popupContent"
          :categories="currentCategories"
          :categoriesAPI="categories"
          :key="currentPopupTitle"
          @close="closePopup"
          :title="currentPopupTitle"
          :positive-reviews="getCurrentPositiveReviews"
          :service-data="currentServiceData"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import { reviewSentimentCategories } from "@/api/information.js";
// Icons
import cleanIcon from "@/assets/pieIcon/clean.png";
import roomIcon from "@/assets/pieIcon/room.png";
import bigbed from "@/assets/pieIcon/circle8/bigbed1.png";
import bigclean from "@/assets/pieIcon/circle8/bigclean1.png";
import biglocation from "@/assets/pieIcon/circle8/biglocation1.png";
import bigsun from "@/assets/pieIcon/circle8/bigsun1.png";
import bigservices from "@/assets/pieIcon/circle8/bigservices1.png";
import bigfood from "@/assets/pieIcon/circle8/bigfood1.png";
import bigmoney from "@/assets/pieIcon/circle8/bigmoney1.png";
import defaultIcon from "@/assets/pieIcon/bigbed.png";
// Components
import CheckData from "./components/CheckData.vue";
import AllServicesHome from "./components/AllServicesHome.vue";
import DetailPop from "./components/DetailPop/DetailPop.vue";

export default {
  components: {
    CheckData,
    AllServicesHome,
    DetailPop,
  },
  props: {
    categories: {
      type: Object, // 要求传入的是 Object
      required: true, // 或者 false，取决于是否必须
      default: () => ({}), // 可以设置默认值（空对象）
    },
  },
  data() {
    return {
      // Icons
      bigclean,
      cleanIcon,
      roomIcon,
      biglocation,
      bigsun,
      bigbed,
      bigfood,
      bigservices,
      bigmoney,

      // Popup state
      currentIcon: null,
      popupContent: "",
      isPopupVisible: false,
      currentCategories: [],
      currentPopupTitle: "",
      currentServiceData: null, // 存储当前服务的分类数据
      // Data
      allPositiveReviews: [
        {
          key: "cleanness",
          title: "Cleanness",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        },
        {
          key: "roomFacilities",
          title: "Room Comfort",
          data: [
            { name: "Bed quality", score: 87 },
            { name: "Sound insulation", score: 61 },
            { name: "Air conditioning/heating ", score: 72 },
            { name: "Size of the room", score: 23 },
            { name: "Lighting ", score: 23 },
            { name: "Shower water pressure", score: 23 },
            { name: "Room design", score: 23 },
            { name: "In-room amenities", score: 23 },
          ],
        },
        {
          key: "location",
          title: "Location & Neighborhood",
          data: [
            { name: "Accessibility", score: 100 },
            { name: "Neighborhood facilities", score: 61 },
            { name: "Safety", score: 23 },
            { name: "Views", score: 23 },
          ],
        },
        {
          key: "hotelAmenities",
          title: "Hotel Amenities & Atmosphere",
          data: [
            { name: "Wi-Fi & Internet connection", score: 100 },
            { name: "Gym", score: 61 },
            { name: "Swimming pool ", score: 30 },
            { name: "Spa ", score: 23 },
            { name: "Business centre ", score: 23 },
            { name: "Meeting rooms ", score: 23 },
            { name: "Car parking", score: 23 },
            { name: "Executive Lounge", score: 23 },
            { name: "Hotel Atmosphere & Design ", score: 23 },
          ],
        },
        {
          key: "guestService",
          title: "Guest Experience & Service",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        },
        {
          key: "foodBeverage",
          title: "Food & Beverage",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        },
        {
          key: "valueForMoney",
          title: "Value for Money",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        },
      ],
      serviceCategories: [
        {
          key: "cleanness",
          title: "Cleanness",
          data: [
            {
              title: "Room hygiene",
              data: [
                {
                  title: "Cleanliness of bed linen",
                  score: 6.2,
                  reviewCount: 42,
                  sentiment: "42 positive",
                },
                {
                  title: "Carpets",
                  score: 9.4,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Table tops",
                  score: 8.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Bathrooms",
                  score: 6.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
              ],
            },
            {
              title: "Bathroom hygiene",
              data: [
                {
                  title: "Toilet",
                  score: 7.4,
                  reviewCount: 45,
                  sentiment: "43 positive",
                },
                {
                  title: "Shower ",
                  score: 7.4,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Towels",
                  score: 5.2,
                  reviewCount: 32,
                  sentiment: "30 positive",
                },
                {
                  title: "Toiletries neatness",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },

            {
              title: "Public area hygiene ",
              data: [
                {
                  title: "Lifts",
                  score: 7.4,
                  reviewCount: 45,
                  sentiment: "43 positive",
                },
                {
                  title: "Lobbies",
                  score: 7.4,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Corridors",
                  score: 5.2,
                  reviewCount: 32,
                  sentiment: "30 positive",
                },
                {
                  title: "Gyms",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Odour ",
              data: [
                {
                  title: "Room or hotel smell",
                  score: 8.2,
                  reviewCount: 42,
                  sentiment: "42 positive",
                },
                {
                  title: "Smoke",
                  score: 5.4,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Mould",
                  score: 4.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
              ],
            },

            {
              title: "Restaurant cleaness",
              data: [
                {
                  title: "Restaurant cleaness",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
          ],
        },
        {
          key: "roomFacilities",
          title: "Room Comfort",
          data: [
            {
              title: "Bed quality",
              data: [
                {
                  title: "mattress softness",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Pillow comfort",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Sheet material",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Sound insulation",
              data: [
                {
                  title: "Neighbor noise",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Corridor noise",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Street can be heard",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Air conditioning/heating",
              data: [
                {
                  title: "Temperature control accurate",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Room size",
              data: [
                {
                  title: "Is there enough storage space for luggage",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Lighting",
              data: [
                {
                  title: "is the room lit bright enough for office/reading",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Shower water pressure",
              data: [
                {
                  title: "is the water pressure stable and is there a problem",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Room design",
              data: [
                {
                  title: "Style of décor/ 9.4",
                  score: 8.8,
                  reviewCount: 50,
                  sentiment: "48 positive",
                },
                {
                  title: "Tables and chairs arranged/ 4.3",
                  score: 7.9,
                  reviewCount: 35,
                  sentiment: "30 positive",
                },
              ],
            },

            {
              title: "In-room amenaties",
              data: [
                {
                  title: "In-room amenaties",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
          ],
        },
        {
          key: "location",
          title: "Location & Neighborhood",
          data: [
            {
              title: "Accessibility",
              data: [
                {
                  title: "Metro station",
                  score: 9.4,
                  reviewCount: 55,
                  sentiment: "53 positive",
                },
                {
                  title: "Bus station",
                  score: 7.8,
                  reviewCount: 30,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Neighborhood facilities",
              data: [
                {
                  title: "Restaurants",
                  score: 8.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "Supermarkets",
                  score: 1.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
                {
                  title: "Shopping malls",
                  score: 1.7,
                  reviewCount: 35,
                  sentiment: "32 positive",
                },
              ],
            },
            {
              title: "Safety",
              data: [
                {
                  title: "Surroundings safe",
                  score: 9.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "The nights suitable for walking",
                  score: 7.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
              ],
            },
            {
              title: "Views",
              data: [
                {
                  title: "Availability of sea views",
                  score: 8.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "City views",
                  score: 7.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
                {
                  title: "Mountain views",
                  score: 7.7,
                  reviewCount: 35,
                  sentiment: "32 positive",
                },
              ],
            },
          ],
        },
        {
          key: "hotelAmenities",
          title: "Hotel Amenities & Atmosphere",
          data: [
            {
              title: "Wi-Fi & Internet",
              data: [
                {
                  title: "Speed",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Stability",
                  score: 9.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Free/charge situation",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Gym",
              data: [
                {
                  title: "Equipment abundance",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Opening hours",
                  score: 8.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Maintenance",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Swimming pool ",
              data: [
                {
                  title: "Water quality",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Temperature",
                  score: 5.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Availability of lifeguards",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Opening hours",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Spa",
              data: [
                {
                  title: "Massage technique professionalism",
                  score: 8.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Aromatherapy environment comfort",
                  score: 9.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
              ],
            },
            {
              title: "Business centre",
              data: [
                {
                  title: "Printers",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Meeting rooms",
                  score: 6.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Teleconferencing equipment",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Meeting rooms",
              data: [
                {
                  title: "Space",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Equipment",
                  score: 6.1,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Catering/ 6.1",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Car parking ",
              data: [
                {
                  title: "Parking Price",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Adequacy of spaces",
                  score: 6.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Security",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Executive Lounge",
              data: [
                {
                  title: "Executive Lounge",
                  score: 9.0,
                  reviewCount: 46,
                  sentiment: "44 positive",
                },
              ],
            },
            {
              title: "Hotel Atmosphere & Design ",
              data: [
                {
                  title: "Vibe",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Aesthetic appeal",
                  score: 8.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Decorations)",
                  score: 8.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
          ],
        },
        {
          key: "guestService",
          title: "Guest Experience & Service",
          data: [
            {
              title: "Booking",
              data: [
                {
                  title: "Online reservation convenience",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Customer service responsiveness",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Membership benefits",
              data: [
                {
                  title: "Discount privilege authenticity",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Exclusive service timeliness",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Special request handling",
              data: [
                {
                  title: "Customized service fulfillment",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Emergency request efficiency",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Front desk & Concierge",
              data: [
                {
                  title: "Receptionist professionalism",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Concierge problem-solving ability",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "In-room request",
              data: [
                {
                  title: "Order delivery speed",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Special request handling efficiency",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Cleaning & Tidying",
              data: [
                {
                  title: "Room cleanliness standard",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Housekeeping timeliness",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Flexibility of guest needs",
              data: [
                {
                  title: "Special requirement accommodation",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Scheduling adjustment flexibility",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Complaints & Feedback",
              data: [
                {
                  title: "Issue resolution effectiveness",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Feedback response timeliness",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Lounge service",
              data: [
                {
                  title: "Catering quality & variety",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Lounge staff attentiveness",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "SPA & GYM & Pool service",
              data: [
                {
                  title: "Pool cleanliness & maintenance",
                  score: 9.5,
                  reviewCount: 56,
                  sentiment: "54 positive",
                },
                {
                  title: "SPA staff professionalism",
                  score: 8.2,
                  reviewCount: 39,
                  sentiment: "31 positive",
                },
                {
                  title: "GYM opening hours convenience",
                  score: 6.8,
                  reviewCount: 41,
                  sentiment: "28 positive",
                },
                {
                  title: "Pool water temperature",
                  score: 8.7,
                  reviewCount: 45,
                  sentiment: "39 positive",
                },
              ],
            },
            {
              title: "Billing",
              data: [
                {
                  title: "Invoice accuracy",
                  score: 9.1,
                  reviewCount: 78,
                  sentiment: "72 positive",
                },
                {
                  title: "Refund processing speed",
                  score: 6.7,
                  reviewCount: 31,
                  sentiment: "19 positive",
                },
                {
                  title: "Clarity of pricing information",
                  score: 8.8,
                  reviewCount: 68,
                  sentiment: "61 positive",
                },
              ],
            },
            {
              title: "Points arrival speed",
              data: [
                {
                  title: "Membership points posting timeliness",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Points transaction record clarity",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Customer service response",
              data: [
                {
                  title: "Inquiry resolution speed",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Service attitude professionalism",
                  score: 6.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            // {
            //   title: "Feedback experience",
            //   data: [
            //     {
            //       title: "Review submission convenience",
            //       score: 9.3,
            //       reviewCount: 52,
            //       sentiment: "50 positive",
            //     },
            //     {
            //       title: "Response acknowledgment sincerity",
            //       score: 6.4,
            //       reviewCount: 37,
            //       sentiment: "34 positive",
            //     },
            //   ],
            // },
          ],
        },
        {
          key: "foodBeverage",
          title: "Food & Beverage",
          data: [
            {
              title: "Breakfast",
              data: [
                {
                  title: "Variety of choices",
                  score: 8.2,
                  reviewCount: 33,
                  sentiment: "30 positive",
                },
                {
                  title: "Freshness of ingredients",
                  score: 8.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
                {
                  title: "Flavour",
                  score: 8.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Restaurant",
              data: [
                {
                  title: "Quality of dinner",
                  score: 3.2,
                  reviewCount: 33,
                  sentiment: "30 positive",
                },
                {
                  title: "Flavour",
                  score: 8.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
                {
                  title: "Lunch dishes",
                  score: 6.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
                {
                  title: "Presentation",
                  score: 6.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Bar",
              data: [
                {
                  title: "Cocktail quality",
                  score: 3.2,
                  reviewCount: 33,
                  sentiment: "30 positive",
                },
                {
                  title: "Speed of service",
                  score: 8.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
                {
                  title: "Atmosphere",
                  score: 6.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Room service delivery",
              data: [
                {
                  title: "Speed of delivery",
                  score: 8.6,
                  reviewCount: 39,
                  sentiment: "36 positive",
                },
                {
                  title: "Food temperature",
                  score: 8.9,
                  reviewCount: 44,
                  sentiment: "42 positive",
                },
                {
                  title: "Menu selection",
                  score: 8.9,
                  reviewCount: 44,
                  sentiment: "42 positive",
                },
              ],
            },
            {
              title: "Service and efficiency",
              data: [
                {
                  title: "Service and efficiency",
                  score: 3.2,
                  reviewCount: 33,
                  sentiment: "30 positive",
                },
              ],
            },
          ],
        },
        {
          key: "valueForMoney",
          title: "Value for Money",
          data: [
            {
              title: "Price fairness",
              data: [
                {
                  title: "The pricing fair compared to similar hotels",
                  score: 7.9,
                  reviewCount: 45,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Experience matching  price",
              data: [
                {
                  title: "Whether the room",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Service",
                  score: 8.7,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
                {
                  title: "Amenities are affordable for the rate",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Hidden fees",
              data: [
                {
                  title: "Resort fees",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Parking fees",
                  score: 8.7,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Promotions & Membership Benefits",
              data: [
                {
                  title: "Discounts",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "points redemption ratios are good value",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Overall satisfactions or disappointments",
              data: [
                {
                  title: "Overall stay satisfaction",
                  score: 8.6,
                  reviewCount: 215,
                  sentiment: "182 positive",
                },
                {
                  title: "Likelihood to recommend",
                  score: 8.3,
                  reviewCount: 208,
                  sentiment: "175 positive",
                },
                {
                  title: "Value for money rating",
                  score: 7.8,
                  reviewCount: 196,
                  sentiment: "152 positive",
                },
                {
                  title: "Disappointment with facilities",
                  score: 4.2,
                  reviewCount: 89,
                  sentiment: "23 positive",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    //根据当前类别筛选正面评价
    getCurrentPositiveReviews() {
      const currentKey = this.serviceCategories.find(
        (item) => item.data === this.currentCategories
      )?.key;

      return (
        this.allPositiveReviews.find((item) => item.key === currentKey)?.data ||
        []
      );
    },

    filteredCategories() {
      const fields = ["score", "negative", "neutral", "positive"];
      const result = {};
      fields.forEach((field) => {
        result[field] = this.categories?.[field] ?? ""; // 空值处理
      });
      return result; // 返回的结构: { hotelName: "...", startDate: "...", ... }
    },
    metricValues() {
      // 添加调试日志
      console.log("全局 total:", this.categories?.total);
      console.log(
        "所有分类:",
        this.categories?.serviceCategories?.map((c) => ({
          key: c.key,
          total: c.total,
        }))
      );

      const total = this.categories?.total || 1; // 使用1作为回退值

      return {
        location: this.getCategoryPercentage("location_neighbourhood", total),
        roomComfort: this.getCategoryPercentage("room_comfort", total),
        cleanliness: this.getCategoryPercentage("cleanliness", total),
        amenities: this.getCategoryPercentage(
          "hotel_amenities_atmosphere",
          total
        ),
        food: this.getCategoryPercentage("food_beverage", total),
        service: this.getCategoryPercentage("guest_experience_service", total),
        value: this.getCategoryPercentage("value_for_money", total),
      };
    },
  },
  methods: {
    getCategoryPercentage(key, total) {
      if (!total || total <= 0) {
        console.warn(`总数为0或无效: ${total}`);
        return 0;
      }

      const category = this.getCategoryByKey(key);
      if (!category || typeof category.total !== "number") {
        console.warn(`分类 ${key} 数据无效`, category);
        return 0;
      }

      const percentage = (category.total / total) * 100;
      const rounded = Math.round(percentage * 10) / 10; // 保留一位小数

      console.log(`计算 ${key}: ${category.total} / ${total} = ${rounded}%`);
      return rounded;
    },
    // 新增方法：根据key获取对应的category
    getCategoryByKey(key) {
      if (!this.categories?.serviceCategories) {
        console.warn("serviceCategories 不存在");
        return { total: 0 };
      }

      const result = this.categories.serviceCategories.find(
        (item) => item.key === key
      ) || { total: 0 };

      console.log(`查找 ${key}:`, result.total); // 调试日志
      return result;
    },
    // 如果需要从 Vuex 获取数据
    getSelectedPlatformsFromStore() {
      // 获取原始平台数据
      const platforms =
        this.$store.getters["dashBoard/selectedPlatforms"] || [];

      // 转换为大写
      const uppercasePlatforms = platforms.map((platform) =>
        platform.toUpperCase()
      );

      console.log("转换后的平台名", uppercasePlatforms);

      // 返回转换后的数据
      return uppercasePlatforms;
    },
    handleServiceClick(serviceKey, title) {
      const iconMap = {
        roomFacilities: this.bigbed, // 床的图标
        cleanness: this.bigclean, // 清洁的图标
        location: this.biglocation, // 位置的图标
        hotelAmenities: this.bigsun, // 设施的图标
        foodBeverage: this.bigfood, // 食物的图标
        guestService: this.bigservices, // 服务的图标
        valueForMoney: this.bigmoney, // 价格的图标
      };
      // 2. 赋值给currentIcon
      this.currentIcon = iconMap[serviceKey];
      
      console.log("点击的是什么", serviceKey, title);
      const category = this.serviceCategories.find(
        (item) => item.key === serviceKey
      );
      if (category) {
        this.currentCategories = category.data;
        this.currentPopupTitle = title;
        this.isPopupVisible = true;
      }
    },
    closePopup() {
      this.isPopupVisible = false;
    },
  },
  mounted() {
    //从store获取到平台的数据
    this.getSelectedPlatformsFromStore();
    // this.resetAutoplay();
    console.log("circle从父组件接受的数据", this.categories);
    console.log("酒店名称:", this.categories.endDate);
    console.log("父组件准备传递的数据:", this.categories);
  },
};
</script>

<style lang="scss" scoped>
.empty-data-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px; /* Match your grid height */
  background-color: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;

  .empty-content {
    text-align: center;
    padding: 20px;
    max-width: 400px;

    .empty-icon {
      margin-bottom: 16px;
      color: #5a86dd;
    }

    .empty-title {
      font-size: 18px;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 8px;
    }

    .empty-message {
      font-size: 14px;
      color: #4a5568;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .retry-button {
      padding: 8px 16px;
      background-color: #5a86dd;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #3b6bc6;
      }
    }
  }
}

.hotel-services-dashboard {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

.services-grid {
  display: flex;
  flex-direction: column;
  height: 2.7917rem;
  margin-top: 40px;
}

.top-services-row {
  display: flex;
  width: 100%;
  height: 50%;
  margin-bottom: 10px;
}
.bottom-services-row {
  display: flex;
  width: 100%;
  height: 50%;
}

.service-card {
  flex: 1;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e0e0e0;
  margin-right: 4px;
  box-sizing: border-box;
  height: 100%;

  &:last-child {
    margin-right: 0;
  }
}

.data-check-card {
  ::v-deep .analytics-card {
    height: 100%;
    padding: 0;

    .chart-container {
      height: calc(100% - 30px);
    }
  }
}

.metrics-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px 0;

  .metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .0694rem;

    &:first-child {
      margin-top: 0;
    }
  }

  .metric-content {
    display: flex;
    align-items: center;
  }

  .metric-icon {
    margin-left: 11px;
    width: 0.1111rem;
    height: 0.1111rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 9px;
      height: 9px;
    }
  }

  .metric-label {
    margin-left: 7px;
    font-size: 0.0694rem;
    font-weight: 400;
    color: #4a4a4a;
  }

  .metric-value {
    margin-right: 11px;
    color: #5a86dd;
    font-size: 0.0694rem;
    font-weight: 500;
    opacity: 0.9;
  }
}

.kpi-card {
  display: flex;
  flex-direction: column;

  .kpi-header {
    padding: 6px 13px 0px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .kpi-title {
      font-size: 0.0833rem; /* ~12px */
      font-weight: 600;
      color: #6a6969;
    }

    .kpi-percentage {
      font-size: 0.0833rem; /* ~12px */
      font-weight: 600;
      color: #6a6969;
    }

    .kpi-visibility {
      img {
        width: 18px;
        height: 14px;
      }
    }
  }

  .kpi-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .add-icon {
      width: 50px;
      height: 50px;
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 733px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


</style>
